<template>
  <div class="entityProperty-manage">
    <!-- 业务搜索框 -->
    <search-block @handleSearch="handleSearch"></search-block>
    <!-- 搜索框和按钮组件 -->
    <operate-button :multipleSelection="multipleSelection" @handleSearch="handleSearch"></operate-button>
    <pagination-table
      :tableData="tableData"
      :tableLabel="tableLabel"
      :pageSizes="pageSizes"
      :pageSize="pageSize"
      :total="total"
      :currentPage="currentPage"
      @changePager="changePager"
      @changeSelection="changeSelection"
    ></pagination-table>
  </div>
</template>

<script>
import SearchBlock from './components/searchBlock'
import OperateButton from './components/operateButton'
import PaginationTable from '@/components/PaginationTable/index'

export default {
  name: 'EntityPropertyManage',
  components: {
    SearchBlock,
    OperateButton,
    PaginationTable
  },
  data() {
    return {
      multipleSelection: [],
      pageSizes: [5, 10, 100],
      // pageSize: 0,
      total: 0,
      tableLabel: [
        { keyword: 'id', keyword_zh: 'id' },
        { keyword: 'title', keyword_zh: '属性名称' },
        { keyword: 'fieldName', keyword_zh: '物理字段名' },
        { keyword: 'fieldType', keyword_zh: '字段类型' },
        { keyword: 'required', keyword_zh: '是否必填' },
        { keyword: 'defaultValue', keyword_zh: '默认值' },
        { keyword: 'fieldLength', keyword_zh: '字段长度' }
      ],
      tableData: [],
      currentPage: 1
    }
  },
  computed: {
    pageSize() {
      return this.pageSizes[0]
    },
    entityProperty() {
      return {
        pager: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }
    }
  },
  methods: {
    changeSelection(val) {
      this.multipleSelection = val
    },
    changePager(pager) {
      this.entityProperty.pager = pager
      this.getTableData()
    },
    getTableData() {
      this.$store
        .dispatch('entityProperty/queryForList', this.entityProperty)
        .then(res => {
          this.total = res.total
          //格式化部分数据类型
          res.list.forEach(item => {
            item.required = item.required ? '是' : '否'
            if (item.fieldType) {
              item.fieldType = JSON.parse(item.fieldType).title
            }
          })
          this.tableData = res.list
        })
    },
    handleSearch(searchParams) {
      if (!!searchParams) {
        this.entityProperty.title = searchParams.title
        this.entityProperty.fieldName = searchParams.fieldName
      }
      this.getTableData()
    }
  },
  mounted() {
    if (this.$route.query && Object.keys(this.$route.query).length > 0) {
      this.entityProperty.entityId = this.$route.query.id
    }
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.saearch-block-container {
  padding: 0 20px 20px 20px;
}
.pagination-table-container {
  padding: 0 20px 20px 20px;
}
.operate-button-container {
  padding: 0 20px 20px 20px;
}
</style>

